<template>
	<view>
		<view class="label-item">
			<view class="label-left-name">提现金额</view>
			<view class="right-ipt-box"><input type="number" v-model="amount" placeholder="请输入提现金额" /></view>
		</view>

		<view class="desc-box">
			<view class="left-desc">最多可提现{{ money }}元</view>
			<view class="right-btn" @click="amount = money">全部提现</view>
		</view>

		<view class="">
			<view class="label-item">
				<view class="label-left-name">提现手续费为：</view>
				<view class="right-num">{{ shopDraw/10 }}%</view>
			</view>
			<view class="label-item">
				<view class="label-left-name">最终到账金额为：</view>
				<view class="right-num">{{ amount - (amount * (shopDraw/1000)) }}元</view>
			</view>
			<!-- 银行卡 -->
			<view v-if="payTypeIndex == 1">
				<view class="label-item">
					<view class="label-left-name">开户行</view>
					<view class="right-ipt-box"><input type="text" v-model="bank_name" placeholder="请输入开户行" /></view>
				</view>
				<view class="label-item">
					<view class="label-left-name">银行卡号</view>
					<view class="right-ipt-box"><input type="number" v-model="bank_id" placeholder="请输入银行卡号" /></view>
				</view>
				<view class="label-item">
					<view class="label-left-name">姓名</view>
					<view class="right-ipt-box"><input type="text" v-model="name" placeholder="请输入姓名" /></view>
				</view>
				<view class="label-item">
					<view class="label-left-name">手机号</view>
					<view class="right-ipt-box"><input type="number" maxlength="11" v-model="mobile" placeholder="请输入手机号" /></view>
				</view>
			</view>
			<view class="label-item" style="border: none">
				<radio-group class="radio-box" @change="radioChange">
					<label class="label-radio" v-for="(item, index) in payTypeArr" :key="item.value">
						<view style="margin-right: 3rpx;">
							<radio style="transform:scale(0.6)" color="#fd8464" :value="item.value" :checked="index === payTypeIndex" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>
		</view>
		
		<view class="submit-btn" @click="goToApply">确认提现</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payTypeArr: [
					{
						value: '0',
						name: '微信零钱'
					},
					{
						value: '1',
						name: '银行卡'
					}
				],
				payTypeIndex: 0,
				money: 0, // 可提现余额
				shopDraw: 0, // 手续费
				
				amount: '', //	string	是	提现金额
				bank_name: '', //	string	是	开户行
				bank_id: '', //	string	是	银行卡id
				name: '', //	string	是	姓名
				mobile: '', //	string	是	手机号
			}
		},
		onLoad(option) {
			if(option.money != '') this.money = option.money;
			this.getShopDraw();
		},
		methods: {
			//切换提现方式
			radioChange(e) {
				let { value } = e.detail;
				this.payTypeIndex = Number(value)
			},
			
			//获取提现手续费
			getShopDraw() {
				this.$api.post({
					url: '/wanlshop.shop/shopDraw',
					success: res => {
						this.shopDraw = res
					}
				})
			},
			
			//确认提现
			goToApply() {
				var that=this;
				uni.login({
					provider:'weixin',
					success: function (loginRes) {
					    var code=loginRes.code;
						let { payTypeIndex, money, amount, bank_name, bank_id, name, mobile } = that;
						if(Number(amount) == 0) return that.uniMsg('提现金额不能为0')
						// if(amount > money) return that.uniMsg('超出可提现余额');
						if(payTypeIndex == 1 && !bank_name) return that.uniMsg('请输入开户行');
						if(payTypeIndex == 1 && !bank_id) return that.uniMsg('请输入银行卡号');
						if(payTypeIndex == 1 && !name) return that.uniMsg('请输入姓名');
						if(payTypeIndex == 1 && !mobile) return that.uniMsg('请输入手机号');
						let to_shop_id = uni.getStorageSync('userShopId')
						let data = { amount, type: payTypeIndex, to_shop_id,code};
						if(payTypeIndex == 1) {
							data.bank_name = bank_name;
							data.bank_id = bank_id;
							data.name = name;
							data.mobile = mobile;
						}
						that.$api.post({
							url: '/wanlshop.shop/shopDrawal',
							data,
							success: res => {
								that.uniMsg('提交成功', 'success');
								setTimeout(() => uni.navigateBack(), 1200)
							}
						})
					  }
				})
				
			},
			
			uniMsg(title, icon = 'none') {
				uni.showToast({
					title: title,
					icon: icon
				})
			}
		}
	}
</script>

<style scoped>
	.label-item {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: white;
		border-bottom: solid 1rpx #ebebeb;
	}

	.label-left-name {
		font-size: 30rpx;
		line-height: 30rpx;
		margin-right: 15rpx;
		flex-shrink: 0;
	}

	.right-ipt-box {
		width: 100%;
		height: 100%;
	}

	.right-ipt-box input {
		font-size: 30rpx;
		text-align: right;
	}

	.desc-box {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 30rpx;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.left-desc {
		font-size: 30rpx;
		color: #8f8f8f;
	}

	.right-btn {
		color: #fd8464;
		font-size: 32rpx;
	}

	.right-num {
		font-size: 30rpx;
	}
	.submit-btn {
		width: 90%;
		height: 70rpx;
		border-radius: 15rpx;
		background-color: #fc8466;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: white;
		font-weight: bold;
		margin: 80rpx auto 0;
	}
	.radio-box {
		width: 100%;
		display: flex;
		align-items: center;
	}
	.label-radio {
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}
</style>
